---
title: 'Modo Automático'
description: 'Cómo usar Modo Automático'
---

import { Callout, Tab, Tabs } from 'nextra-theme-docs';

# Modo Automático

Million.js utiliza el Modo Automático de forma predeterminada si lo has instalado a través de la CLI.
Esto optimiza tus componentes de React, mejorando la velocidad sin necesidad de realizar cambios importantes en el código. Esta es la forma recomendada de utilizar Million.js.

### Personalización avanzada

El modo automático proporciona opciones de personalización:

- `threshold`: Se utiliza para determinar si un componente debe convertirse a Million.js. A medida que aumenta el `threshold`, se optimizarán menos componentes, y viceversa.
- `skip`: Un array de identificadores que indica si un componente debe omitirse. Puedes agregar nombres de hooks, variables, nombres de funciones, etc.

El objeto `auto` te permite configurar opciones más allá de las predeterminadas establecidas durante la instalación:

```js
auto: {
  threshold: 0.05, // default: 0.1,
  skip: ['useBadHook', /badVariable/g], // default []
}
```

<Tabs items={['Next.js', 'Astro', 'Gatsby', 'Vite', 'Remix', 'Create React App', 'Webpack', 'Rollup']} storageKey="selected-bundler-compiler">
<Tab>
```js filename="next.config.mjs"
import million from 'million/compiler';

/** @type {import('next').NextConfig} */
const nextConfig = {
   reactStrictMode: true,
};

const millionConfig = {
  auto: {
    threshold: 0.05, // default: 0.1,
    skip: ['useBadHook', /badVariable/g], // default []
    // Si estas usando RSC: auto: { rsc: true },
  }
}

export default million.next(nextConfig, millionConfig);
```
</Tab>

<Tab>
```js filename="astro.config.mjs"
import { defineConfig } from "astro/config";
import million from "million/compiler";

export default defineConfig({
  vite: {
    plugins: [
      million.vite({
        mode: "react",
        server: true,
        auto: {
          threshold: 0.05,
          skip: ["useBadHook", /badVariable/g],
        },
      }),
    ],
  },
});
```
</Tab>

<Tab>
```js filename="gatsby-node.js"
const million = require("million/compiler");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [
      million.webpack({
        mode: "react",
        server: true,
        auto: {
          threshold: 0.05,
          skip: ["useBadHook", /badVariable/g],
        },
      }),
    ],
  });
};
```
</Tab>

<Tab>
```js filename="vite.config.js"
import million from "million/compiler";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    million.vite({
      auto: {
        threshold: 0.05,
        skip: ["useBadHook", /badVariable/g],
      },
    }),
    react(),
  ],
});
```
</Tab>

<Tab>
```js filename="vite.config.js"
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import million from "million/compiler";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    million.vite({
      auto: {
        threshold: 0.05,
        skip: ["useBadHook", /badVariable/g],
      },
    }),
    remix(),
  ],
});
```
</Tab>

<Tab>
<Callout type="warning">
  Si estas usando [Create React App (CRA)](https://create-react-app.dev/), necesitaras [configurar Craco](https://craco.js.org/docs/getting-started/) antes de proceder.
</Callout>

```js filename="craco.config.js"
const million = require("million/compiler");

module.exports = {
  webpack: {
    plugins: {
      add: [
        million.webpack({
          auto: {
            threshold: 0.05,
            skip: ["useBadHook", /badVariable/g],
          },
        }),
      ],
    },
  },
};
```
</Tab>

<Tab>
```js filename="webpack.config.js"
const million = require("million/compiler");
module.exports = {
  plugins: [
    million.webpack({
      auto: {
        threshold: 0.05,
        skip: ["useBadHook", /badVariable/g],
      },
    }),
  ],
};
```
</Tab>

<Tab>
```js filename="rollup.config.js"
import million from "million/compiler";

export default {
  plugins: [
    million.rollup({
      auto: {
        threshold: 0.05,
        skip: ["useBadHook", /badVariable/g],
      },
    }),
  ],
};
```
</Tab>

</Tabs>

### Ignorando componentes

Si te encuentras con algún error en un componente durante el tiempo de ejecución de Million.js, puedes omitirlo utilizando el comentario `// million-ignore`.

```js
// million-ignore
function App() {
  return ...
}
```

### Silenciando mensajes de ayuda

Para evitar ver mensajes de ayuda, puedes pasar la opción `mute: true{:js}` al compilador dentro del objeto `auto`.
